<template>
  <div>
    <el-button-group>
      <el-button type="primary" @click="addOrUpdateHandle()" disabled>新增</el-button>
<!--      <el-button type="warning" @click="deleteHandle">批量删除</el-button>-->
    </el-button-group>
    <el-table
        :data="dataList"
        border stripe
        v-loading="dataListLoading"
        style="width: 100%;">
<!--      <el-table-column-->
<!--          type="selection"-->
<!--          header-align="center"-->
<!--          align="center"-->
<!--          width="50">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="id"-->
<!--          width="80"-->
<!--          header-align="center"-->
<!--          align="center"-->
<!--          label="ID">-->
<!--      </el-table-column>-->
      <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="分类名称">
      </el-table-column>
      <el-table-column
          prop="url"
          header-align="center"
          align="center"
          label="来源地址">
<!--        <template #default="scope">-->
<!--          <div v-if="scope.row.url" type="text"-->
<!--               size="small">-->
<!--            <a :href="scope.row.url" target="_blank">查看</a>-->
<!--          </div>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-popconfirm
              :title="confirmTitle"
              confirmButtonText='确定'
              cancelButtonText='不用了'
              icon="el-icon-info"
              @confirm="doDeleteHandle"
              iconColor="red">
            <template #reference>
              <el-button type="text" size="small" @click="deleteConfirm(scope.row.id)">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[1, 10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"/>
  </div>
</template>
<script>
import {page, delete_one} from '../../apis/sources'
import usePage from "../../hooks/usePage";
import AddOrUpdate from './source-add-or-update'

export default {
  name: 'sources-page',
  components: {AddOrUpdate},
  setup() {
    const {
      dataList, pageSize, pageIndex, totalPage, addOrUpdateVisible,
      dataListLoading, deleteConfirm, confirmTitle,
      doGetDataList, sizeChangeHandle, currentChangeHandle,
      doAddOrUpdateHandle, doDeleteHandle,
    } = usePage({pageFun: page, deleteFun: delete_one})
    return {
      dataList,
      pageSize,
      pageIndex,
      totalPage,
      addOrUpdateVisible,
      doAddOrUpdateHandle,
      dataListLoading,
      deleteConfirm,
      confirmTitle,
      sizeChangeHandle,
      doDeleteHandle,
      currentChangeHandle,
      deleteHandle: doDeleteHandle,
      getDataList: doGetDataList
    }
  },
  data() {
    return {}
  },
  methods: {
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      })
    },
  }
}
</script>